<template>
  <!-- 产品流程设置 -->
  <Card style="height:800px">
    <header>
      <span>产品名称:</span>
      <Select v-model="productType" style="width:200px">
        <Option v-for="item in productTypeDatas" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <span style="margin:0px 0px 0px 20px">状态:</span>
      <Select v-model="status" style="width:200px">
        <Option v-for="item in statusOptionsData" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Button type="primary" @click="initPage" style="margin:0px 0px 0px 20px;width: 110px">查询</Button>
      <Button type="primary" @click="addProFlowPage" style="margin:0px 0px 0px 20px;width: 110px">添加产品流程</Button>
    </header>
    <Content style="margin-top:20px;">
      <Table  border :columns="tableColumns" :data="tableDatas"></Table>
    </Content>
    <div style="text-align:center;width:50%;margin:100px auto;">
      <Page :total="totalPage" :current="pageNum" :page-size="pageSize" size="small" show-elevator show-sizer show-total @on-change="handlePageChange" @on-page-size-change="sizeChange"></Page>
    </div>
  </Card>
</template>

<script>

export default {

  data () {
    return {
      test: 'hello',
      isEdit: false,
      productType: null,
      productTypeDatas: [],
      tableColumns: [
        {
          type: 'index',
          title: '序号'
        },
        {
          title: '产品类别编码',
          key: 'prodcut_type'
        },
        {
          title: '产品名称',
          key: 'product_name'
        },
        {
          title: '流程ID/KEY',
          key: 'act_key'
        },
        {
          title: '流程名称',
          key: 'act_name'
        },
        {
          title: '状态',
          key: 'status'
        },
        {
          title: '最近更新人',
          key: 'update_by'
        },
        {
          title: '最近更新时间',
          key: 'updated_date'
        },
        {
          title: '操作',
          render: (h, param) => {
            const vm = this
            return h('div', {}, [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '12px'
                },
                on: {
                  click: () => {
                    vm.handleRouterGo('product_flow_edit', param.row.id)
                  }
                }
              }, '编辑')
            ])
          }
        }
      ],
      tableDatas: [],
      statusOptionsData: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: 0,
          label: '有效'
        },
        {
          value: 1,
          label: '无效'
        }
      ],
      status: null,
      totalPage: 0,
      pageNum: 1,
      pageSize: 12,
      tableDatas2: []
    }
  },
  methods: {
    handlePageChange: function (pageNum) {
      var vm = this
      vm.pageNum = pageNum
      vm.initPage()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.pageSize = pageLength
      vm.initPage()
    },
    handleRouterGo (toPage, id) {
      if (id != null) {
        this.$router.push({ name: toPage, params: { id: id } })
      } else {
        this.$Message.warning('参数为空')
      }
    },
    addProFlowPage () {
      this.$router.push({ name: 'product_flow_add', params: {} })// 类似post传参
    },
    initProductType () {
      var params = {}
      params.productType = null
      params.version = null
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchProduct', params).then(re => {
        var datas = re.data.data || []
        this.productTypeDatas = []
        var fData = {}
        fData.label = '请选择'
        fData.value = ''
        this.productTypeDatas.push(fData)
        datas.forEach(item => {
          var sData = {}
          sData.value = item.productType
          sData.label = item.productTypeName
          this.productTypeDatas.push(sData)
        })
      }).catch(er => {
      })
    },
    initPage () {
      var vm = this
      var params = {}
      params.productType = this.productType
      params.status = this.status
      params.pageSize = vm.pageSize
      params.pageNum = vm.pageNum
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/manager_pt/service/show', params).then(re => {
        this.totalPage = re.data.data.total
        this.pageSize = re.data.data.pageSize
        this.currentPage = re.data.pageNum
        this.tableDatas = []
        var datas = re.data.data.list || []
        datas.forEach(item => {
          var tData = {}
          tData.prodcut_type = item.productType
          tData.product_name = item.productTypeName
          tData.act_key = item.actKey
          tData.act_name = item.actName
          if (item.status === 0) {
            tData.status = '有效' // '0有效  1失效'
          } else {
            tData.status = '无效'
          }
          tData.update_by = item.updatedBy
          tData.updated_date = this.$util.formatTime(new Date(item.updatedDate))
          tData.id = item.id
          this.tableDatas.push(tData)
        })
      }).catch(er => {
      })
    }
  },
  created: function () {
    this.$ajax = this.$util.ajax()
    this.initProductType()
    this.initPage()
  }
}
</script>

<style lang="less">

</style>
